<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改数据库配置')"/>
    <link href="../static/tmd/css/database.css" th:href="@{/tmd/css/database.css?v=0.0.2}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-database-edit" th:object="${tmdDatabase}">
        <input name="databaseId" th:field="*{databaseId}" type="hidden">
        <input name="databasePassword" th:field="*{databasePassword}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">数据库名称：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input name="databaseName" th:field="*{databaseName}" class="form-control" type="text" required >
                    <span class="input-group-addon testConnection" onclick="testConnection($('#form-database-edit').serialize())" title="测试连接"><i class="fa fa-check"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">类型：</label>
            <div class="col-sm-8">
                <select name="databaseType" class="form-control m-b" th:with="type=${@dict.getType('database_type')}"
                        required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{databaseType}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">主机：</label>
            <div class="col-sm-8">
                <input name="databaseHost" th:field="*{databaseHost}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">端口：</label>
            <div class="col-sm-8">
                <input name="databasePort" th:field="*{databasePort}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">库：</label>
            <div class="col-sm-8">
                <input name="databaseDbname" th:field="*{databaseDbname}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">用户名：</label>
            <div class="col-sm-8">
                <input name="databaseUser" th:field="*{databaseUser}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">密码：</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input id="databasePasswordShow" name="databasePasswordShow"
                           placeholder="请输入要修改的密码" class="form-control" type="text" >
                    <span class="input-group-addon" title="密码,鼠标按下显示密码"
                          onmousedown="$('#databasePasswordShow').attr('type','text')"
                          onmouseup="$('#databasePasswordShow').attr('type','password')"><i class="fa fa-key"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">状态：</label>
            <div class="col-sm-8">
                <select name="status" class="form-control m-b" th:with="type=${@dict.getType('database_status')}"
                        required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                            th:field="*{status}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script src="../../static/tmd/database.js" th:src="@{/tmd/database.js}"></script>
<script th:inline="javascript">
    var prefix = ctx + "datamonitor/database";
    $("#form-database-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-database-edit').serialize());
        }
    }
</script>
</body>
</html>